<template>
	<view class="page-container">
		<view class="coupon-container">
			<view class="title-info">
				<text class="title-info-left">订单编号 {{ couponOrder.payId }}</text>
				<view class="title-info-right">
					<coupon-order-status :couponOrder="couponOrder"></coupon-order-status>
				</view>
			</view>
			<!-- 优惠券订单模板 -->

			<coupon-order :couponOrder="couponOrder"></coupon-order>
			
			<view class="refound-btn" v-if="
                    (couponOrder.status == 1 || couponOrder.status == 2 || couponOrder.status == 4 || couponOrder.status == 8) &&
                    !util.isEmpty(couponOrder.exchangeRuleType) &&
                    couponOrder.coupon.couponOrigin != '1'
                " :data-pay-id="couponOrder.payId" @tap.stop.prevent="showRefound">
				<text class="btn-text"
					:style="'background: linear-gradient(140deg, ' + platformConfig.gradientColors[0] + ' 0%, ' + platformConfig.gradientColors[1] + ' 100%);'">
					申请退款
				</text>
			</view>
		</view>

		<view class="order-info">
			<view class="order-info-line1">
				<text>下单时间</text>
				<text>{{ couponOrder.createTime }}</text>
			</view>
			<view class="order-user-info">
				<view class="user-info-item">
					<text>联系人</text>
					<text>{{ couponOrder.memberName }}</text>
				</view>
				<view class="user-info-item">
					<text>手机号</text>
					<text style="color: #c46f2a">{{ couponOrder.memberPhone }}</text>
				</view>
			</view>
		</view>

		<view class="refound-container" v-if="showRefoundToast">
			<view class="refound-content">
				<view class="refound-content-line1">
					请等待工作人员审核，审核通过后{{ couponOrder.coupon.couponType == '2' ? '积分' : '金额' }}将自动到账。</view>
				<view class="refound-content-line2" @tap.stop.prevent="closeRefound">已知晓</view>
			</view>
		</view>

		<view class="sharebox" v-if="couponOrder.status == 4 && couponOrder.couponCode">
			<view class="invitationButton" :style="'background: ' + platformConfig.baseColor + ';'"
				:data-pay-id="couponOrder.payId" @tap.stop.prevent="toCouponCodeDetail">
				查看优惠券
			</view>
		</view>
		<view class="sharebox" v-if="couponOrder.status == 0">
			<view class="invitationButton" :style="'background: ' + platformConfig.baseColor + ';'"
				:data-pay-id="couponOrder.payId" @tap.stop.prevent="toPay">
				<text :data-time="couponOrder.limitTime">立即支付</text>
				<u-count-down :time="couponOrder.limitTime * 1000" format="（剩余mm:ss）" @finish="finished" />
			</view>
		</view>
	</view>
</template>
<script module="util" lang="wxs" src="../../../utils/util.wxs"></script>
<script>
	const app = getApp();

	const util = require('../../../utils/util.js');
  import couponOrderStatus from '@/components/couponOrderStatus/couponOrderStatus.vue'
  import couponOrder from '@/components/couponOrder/couponOrder.vue'
	import {
	  http
	} from '@/utils/commonRequest.js'; // 局部引入

	export default {
		components: {
			couponOrderStatus,
			couponOrder
		},
		data() {
			return {
				coupon: {},

				couponOrder: {
					payId: '',
					status: '',

					coupon: {
						couponType: '',
						discountAmt: '',
						couponOrigin: ''
					},

					orderType: 0,
					couponName: '',
					exchangeRuleType: 0,
					point: '',
					couponId: '',
					saleRuleId: '',
					sid: '',
					createTime: '',
					memberName: '',
					memberPhone: '',
					couponCode: '',
					limitTime: ''
				},

				showRefoundToast: false,

				//是否显示退款弹窗
				payId: '',

				platformConfig: app.globalData.platformConfig,
				showOrderType: ''
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			let that = this;
			this.payId = options.payId;
			this.platformConfig = app.globalData.platformConfig

			if (util.isEmpty(this.payId)) {
				util.message('查询订单参数异常');
				return;
			}
		},
		onShow: function() {
			this.onShowClone3389()
		},
		methods: {
			onShowClone3389: function () {
				let payId = this.payId;
				let that = this;

				if (util.isEmpty(payId)) {
					util.message('查询订单参数异常');
					return;
				}

				this.$checkLogin().then((res) => {
					that.getOrderDetail(payId);
				});
			},
			//倒计时结束触发
			finished: function () {
				//有时候页面倒计时结束，但是请求到的数据时间跟页面时间有点差异，所以延时一秒执行
				setTimeout(() => {
					this.onShowClone3389({});
				}, 1000);
			},
			getOrderDetail: function(payId) {
				let that = this;
				let params = {
					payId: payId
				};
				http.get('zsnshCoupon/getOrderDetail', {params}).then((res) => {
					if (200 == res.data.code) {
						console.log(res.data);
						let coupon = res.data.coupon;
						let couponOrder = res.data.couponOrder;
						couponOrder.coupon = coupon;
						console.log(couponOrder.coupon.couponType);
						that.couponOrder = couponOrder
					} else {
						util.message('优惠券订单信息查询失败');
					}
				});
			},

			toCouponCodeDetail: function(e) {
				let payId = e.currentTarget.dataset.payId;

				if (util.isEmpty(payId)) {
					util.message('订单号为空');
				} else {
					uni.navigateTo({
						url: '/pages/coupon/couponCodeDetail/couponCodeDetail?payId=' + payId + '&id=' + this
							.couponOrder.couponId
					});
				}
			},

			toPay: function(e) {
				let payId = e.currentTarget.dataset.payId;

				if (util.isEmpty(payId)) {
					util.message('订单号为空');
				} else {
					app.globalData.toCouponPay(payId, this.couponOrder.payAmount, this.couponOrder.orderType);
				}
			},

			showRefound: function(e) {
				let that = this;
				let payId = e.currentTarget.dataset.payId;

				if (util.isEmpty(payId)) {
					util.message('订单信息异常');
					return;
				}

				let params = {
					payId: payId
				};
				util.showLoading('申请中...');
				http
					.get('/zsnshCoupon/couponOrderRefund', {params})
					.then((res) => {
						util.hideLoading();

						if (200 == res.data.code) {
							that.showRefoundToast = true
						} else if (500 == res.data.code) {
							util.message(res.data.msg);
						} else {
							util.message('退款申请失败，请稍后再试');
						}
					})
					.catch((err) => {
						util.hideLoading();
						util.message('退款申请失败，请稍后再试');
					});
			},

			closeRefound: function() {
				this.showRefoundToast = false
			},

			addToCart() {
				console.log('占位：函数 addToCart 未声明');
			}
		}
	};
</script>
<style>
	@import '../../../templates/zsnshTemplates.css';

	.page-container {
		padding: 24rpx;
	}

	.coupon-container {
		padding: 30rpx 0;
		background: #ffffff;
		box-shadow: 0px 20rpx 60rpx 0px rgba(112, 136, 210, 0.1);
		border-radius: 16rpx;
	}

	.title-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 24rpx;
	}

	.title-info-left {
		font-size: 26rpx;
		color: #666;
	}

	.title-info-right {
		width: 140rpx;
		text-align: right;
		font-size: 28rpx;
		color: #000;
		font-weight: bold;
	}

	.refound-btn {
		display: flex;
		justify-content: flex-end;
		padding-right: 24rpx;
	}

	.btn-text {
		width: 156rpx;
		line-height: 48rpx;
		background: linear-gradient(140deg, #ffc996 0%, #ed176e 100%);
		border-radius: 42rpx;
		text-align: center;
		color: #fff;
		font-size: 28rpx;
	}

	.order-info {
		padding: 0 24rpx 30rpx;
		background: #ffffff;
		box-shadow: 0px 20rpx 60rpx 0px rgba(112, 136, 210, 0.1);
		border-radius: 16rpx;
	}

	.order-info-line1 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 80rpx;
		font-size: 28rpx;
		color: #999;
	}

	.order-user-info {
		background: #f7f7f7;
		border-radius: 24rpx;
		padding: 0 24rpx;
	}

	.user-info-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 84rpx;
		font-size: 28rpx;
		color: #666;
		border-bottom: 1px solid #eaeaea;
	}

	.user-info-item:last-child {
		border-bottom: none;
	}

	.join-info-container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin: 24rpx 0;
		padding: 32rpx 24rpx;
		background: #ffffff;
		box-shadow: 0px 20rpx 60rpx 0px rgba(112, 136, 210, 0.1);
		border-radius: 16rpx;
	}

	.join-info-title {
		display: flex;
		align-items: center;
		color: #666;
		font-size: 26rpx;
	}

	.groupbuy-icon {
		position: relative;
		line-height: 38rpx;
		background: #ed171f;
		color: #fff;
		border-radius: 6rpx;
		font-size: 20rpx;
		padding: 0 4rpx;
		margin-right: 8rpx;
	}

	.groupbuy-icon::after {
		content: '';
		position: absolute;
		top: 100%;
		right: 0px;
		width: 18rpx;
		height: 8rpx;
		border-width: 0;
		border-style: solid;
		border-color: transparent;
		border-left-width: 8rpx;
		border-left-color: currentColor;
		border-radius: 0 0 0 10rpx;
		color: #ed171f;
	}

	.join-info-line1 {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 50rpx;
	}

	.join-user-item {
		position: relative;
		margin-right: 58rpx;
	}

	.leader-icon {
		color: #fff;
		line-height: 32rpx;
		border-radius: 16rpx;
		padding: 0 6rpx;
		background: #ed171f;
		font-size: 20rpx;
		position: absolute;
		right: -20rpx;
	}

	.join-user-img {
		width: 96rpx;
		height: 96rpx;
		border-radius: 50%;
	}

	.pay-icon {
		transform: translateX(-50%);
		position: absolute;
		line-height: 32rpx;
		border-radius: 16rpx;
		color: #fff;
		background: #ff7e1e;
		padding: 0 10rpx;
		bottom: -6px;
		width: 80rpx;
		font-size: 20rpx;
		left: 50%;
	}

	.join-info-line2 {
		font-size: 28rpx;
		text-align: center;
		font-weight: bold;
		color: #222;
		line-height: 40rpx;
		margin-top: 20rpx;
	}

	.join-info-line3 {
		color: #666;
		font-size: 26rpx;
		margin-top: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.van-count-down {
		/* 重写vant组件样式 */
		color: #ff5642 !important;
	}

	.sharebox {
		overflow: hidden;
		background-color: #ff5642;
		border-radius: 42rpx;
		margin-top: 92rpx;
		margin-bottom: 40rpx;
		margin: 90rpx auto 40rpx;
		width: 686rpx;
	}

	.invitationButton {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		background: #ff5642;
		color: #fff;
		height: 84rpx;
		line-height: 84rpx;
		text-align: center;
		padding: 0;
		font-size: 34rpx;
	}

	.invitationButton .van-count-down {
		/* 重写vant组件样式 */
		color: #fff !important;
	}

	/* 退款弹框样式 */

	.refound-container {
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.59);
	}

	.refound-content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 0 54rpx;
		width: 670rpx;
		height: 330rpx;
		background-color: #fff;
		border-radius: 16rpx;
	}

	.refound-content-line1 {
		color: #000;
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 60rpx;
	}

	.refound-content-line2 {
		width: 562rpx;
		line-height: 84rpx;
		font-size: 32rpx;
		color: #fff;
		font-weight: bold;
		text-align: center;
		background: linear-gradient(140deg, #ffc996 0%, #ed176e 100%);
		border-radius: 42rpx;
	}
</style>
